// 自建响应式库


let currentEffect;
class Dep {
  // 1.收集依赖
  constructor(val) {
    // 存起来，且不能重复
    this.effects = new Set();
    this._val = val;
  }
  get value() {
    this.depend()
    return this._val;
  }
  set value(newVal) {
    this._val = newVal;
    this.notice()
  }
  // 收集到的
  depend() {
    if (currentEffect) {
      this.effects.add(currentEffect);
    }
  }
  // 2.触发依赖
  notice() {
    //   触发一下我们之前收集的依赖
    this.effects.forEach((effect) => {
      effect();
    });
  }
}
export function effectWatch(effect) {
  // 收集依赖,存下
  currentEffect = effect;
  effect();
  currentEffect = null;
}
// // 试一下
// // 和ref很像了
// const dep = new Dep(10);

// let b;

// effectWatch(() => {
//   b = dep.value + 10;
//   console.log("heihei", b);
// });
// // 值发生变更后
// dep.value = 20;

// 实现reactive。以上实现单个值的变更（num，str），
// 对象的实时更新思路：obj的每个key，都要给他对应的一个dep

// 1.对象什么时候改变的
// 访问obj.a的时候触发get
// obj.a=2的时候触发set
// proxy。vue3
const targetMap=new Map()

function getDep(target,key) {
  let depsMap = targetMap.get(target)
  // 保证他有值
  if (!depsMap) {
    depsMap = new Map()
    targetMap.set(target,depsMap)
  }
  let dep = depsMap.get(key)// 拿到key的dep
  // 保证获取到dep
  // 两个if确保key和dep做一个映射
  if (!dep) {
    dep = new Dep()
    depsMap.set(key,dep)
  }
  return dep
}
export function reactive(raw) {
  return new Proxy(raw, {
    get(target,key) {
      console.log(key, '触发了获取key');
      // return target[key]
      // dep存哪里？
     const dep=getDep(target,key)
      // 收集依赖
      dep.depend()
      return Reflect.get(target,key)
    },
    set(target,key,value) {
      //触发依赖，获取到dep
      const dep = getDep(target, key)
      const result=Reflect.set(target,key,value)
      dep.notice()
      return result
      
    }
  })
}
// const user = reactive({
//   age:18
// })
// let double
// effectWatch(() => {
//   // 触发get
//   console.log('---reactive----');
//   double = user.age
//   console.log(double,'double');
  
// })
// user.age=19